﻿<h4>Password</h4>
<FluentTextField @bind-Value=value1 TextFieldType="TextFieldType.Password">Password</FluentTextField>

<h4>Email (with spellcheck)</h4>
<FluentTextField @bind-Value=value2 TextFieldType="TextFieldType.Email" Spellcheck="true">Email (with spellcheck)</FluentTextField>

<h4>Telephone number</h4>
<FluentTextField @bind-Value=value3 TextFieldType="TextFieldType.Tel">Telephone</FluentTextField>

<h4>Url</h4>
<FluentTextField @bind-Value=value4 TextFieldType="TextFieldType.Url">Url</FluentTextField>

<h4>Text with InputMode</h4>
<FluentTextField @bind-Value=value5 TextFieldType="TextFieldType.Text" InputMode="InputMode.Numeric">Text with InputMode</FluentTextField>

<h4>Color picker</h4>
<FluentTextField @bind-Value=value6 TextFieldType="TextFieldType.Color" Style="width:178px">Color picker</FluentTextField>

<h4>Search input</h4>
<FluentTextField @bind-Value=value7 TextFieldType="TextFieldType.Search">Search</FluentTextField>

<h4>Numeric</h4>
<FluentTextField @bind-Value=value8 TextFieldType="TextFieldType.Number">Number</FluentTextField>

@code {
    string? value1, value2, value3, value4, value5, value6, value7, value8;
}
